﻿@using PMS.Web.Models.Customers
@{
    ViewData["Title"] = "账户密码重置";
}
@model PasswordRecoveryConfirmModel
@section CssLinks{
    <link href="~/lib/PearAdminLayui/component/pear/css/pear.css" rel="stylesheet" />
    <link href="~/lib/PearAdminLayui/admin/css/other/result.css" rel="stylesheet" />

}

@if (Model.DisablePasswordChanging)
{
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="result">
                <div class="error">
                    <svg viewBox="64 64 896 896" data-icon="close-circle" width="80px" height="80px" fill="currentColor" aria-hidden="true" focusable="false" class="">
                        <path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path>
                        <path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                    </svg>
                </div>
                <h2 class="title">账户密码重置结果</h2>
                <p class="desc" style="height: 80px;">@Model.Result</p>
                <div class="action">
                    <a href="@Url.RouteUrl("HomePage")" class="pear-btn pear-btn-success layui-btn-fluid" style="width: 450px; height: 50px;line-height: 50px;">返回首页</a>
                </div>
            </div>
        </div>
    </div>
}
else
{
    @section CssStyles {
        <style type="text/css">
            .layui-form-label {
                width: 120px !important;
            }
            .layui-input-inline {
                width: 280px !important;
            }
            .pw-strength {
                position: relative;
                top: 8px;
            }
            .pw-bar {
                float: left;
                width: 62px;
                height: 4px;
                margin-top: 5px;
                margin-left: 5px;
                font-size: 0px;
            }
            .pw-default {
                background: #d6d3d3;
            }
            .pw-weak {
                background: #ff3300 !important;
            }
            .pw-medium {
                background: #099 !important;
            }
            .pw-strong {
                background: #060 !important;
            }
            .pw-txt {
                padding-top: 2px;
                width: 220px;
                overflow: hidden;
            }
            .pw-txt span {
                color: #707070;
                float: left;
                font-size: 12px;
                text-align: center;
                width: 66px;
                margin-right: 2px;
            }
        </style>
    }
    <div class="pear-container">
        <div class="layui-card layui-form">
            <div class="layui-card-header">
                <h3>账户密码重置</h3>
            </div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.NewPassword)</label>
                    <div class="layui-input-inline">
                        <input type="password" id="newPassword" name="@Model.NameOf(m => m.NewPassword)" lay-verify="required" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-mid layui-word-aux">请输入您的账号新密码并妥善保管</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码强度</label>
                    <div id="level" class="layui-input-inline pw-strength">
                        <div class="pw-bar pw-default" id='pwdLevel_weak'> </div>
                        <div class="pw-bar pw-default" id='pwdLevel_medium'> </div>
                        <div class="pw-bar pw-default" id='pwdLevel_strong'> </div>
                        <div class="pw-txt">
                            <span>弱</span>
                            <span>中</span>
                            <span>强</span>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.ConfirmNewPassword)</label>
                    <div class="layui-input-inline">
                        <input type="password" name="@Model.NameOf(m => m.ConfirmNewPassword)" lay-verify="required|confirmPass" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-mid layui-word-aux">请再次确认您的输入密码</div>
                </div>
                <input type="text" class="layui-hide" name="@Model.NameOf(m => m.Id)" value="@Model.Id" />
                <input type="text" class="layui-hide" name="@Model.NameOf(m => m.PasswordRecoveryToken)" value="@Model.PasswordRecoveryToken" />
                <input type="text" class="layui-hide" id="pwdstrong" value="" name="@Model.NameOf(m => m.PasswordStrongLevel)" />
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm passwordrecover" lay-submit="" lay-filter="CustomerPasswordRecovery">
                            <i class="layui-icon layui-icon-ok"></i>
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @await Component.InvokeAsync("ModelValidateError")
    @section Scripts{
        <script src="~/lib/PearAdminLayui/component/layui/layui.js"></script>
        <script src="~/lib/PearAdminLayui/component/pear/pear.js"></script>
        <script src="~/dist/js/utils/passwordstrength.min.js"></script>
        <script src="~/dist/js/utils/frontendapiconfig.min.js" asp-append-version="true"></script>
        <script>
            layui.use(['form', 'jquery', 'http', 'button', 'laytpl'], function () {
                var form = layui.form,
                    $ = layui.jquery,
                    button = layui.button,
                    http = layui.http,
                    laytpl = layui.laytpl;

                //密码强度校验
                var $passwordEl = $("#newPassword");
                if ($passwordEl.length > 0) {
                    var $weakEl = $("#pwdLevel_weak"),
                        $mediumEl = $("#pwdLevel_medium"),
                        $strongEl = $("#pwdLevel_strong"),
                        $pwdstronginputEl = $("#pwdstrong");
                    $passwordEl.keyup(function () {
                        $weakEl.removeClass('pw-weak');
                        $mediumEl.removeClass('pw-medium');
                        $strongEl.removeClass('pw-strong');
                        var strength = PasswordStrength.test("", $(this).val());
                        if (strength.isWeak()) {
                            $weakEl.addClass('pw-weak');
                            $pwdstronginputEl.val("Weak");
                        } else if (strength.isGood()) {
                            $weakEl.addClass('pw-weak');
                            $mediumEl.addClass('pw-medium');
                            $pwdstronginputEl.val("Good");
                        } else if (strength.isStrong()) {
                            $weakEl.addClass('pw-weak');
                            $mediumEl.addClass('pw-medium');
                            $strongEl.addClass('pw-strong');
                            $pwdstronginputEl.val("Strong");
                        } else {
                            $pwdstronginputEl.val("Weak");
                        }
                        return true;
                    });
                }

                form.verify({
                    confirmPass: function (value) {
                        if ($('input[name=NewPassword]').val() !== value)
                            return '两次密码输入不一致！';
                    }
                });
                form.on('submit(CustomerPasswordRecovery)', function (data) {
                    var loadbtn = null,
                        modelData = data.field;

                    $('.layui-input').removeAttr('failure');
                    http.post(frontendapiConfig.passwordRecoveryConfirmPOST,
                        modelData,
                        function () { //beforeSend
                            loadbtn = button.load({
                                elem: '.passwordrecover',
                                time: 10000
                            });
                        }
                    ).done(function (response) {
                        if (response.state && response.state === 200) {
                            layer.alert(response.message, {
                                title: "修改成功",
                                icon: 1,
                                closeBtn: 0,
                                end: function () {
                                    http.ajax.handleTargetUrl(response.data.returnUrl);
                                }
                            });
                        }
                    }).fail(function (error) {
                        //For ModelValidation
                        if (error.status && error.status === 400) {
                            var validator = error.responseJSON;
                            if (validator.ErrorCode && validator.ErrorCode === "FluentValidationError") {
                                var validateTpl = document.getElementById('validateResultTpl').innerHTML;
                                laytpl(validateTpl).render(validator, function (html) {
                                    http.ajax.showError({
                                        message: '提示信息',
                                        details: html
                                    });
                                });
                                //标红校验错误的数据框
                                layui.each(validator.Errors, function (index, item) {
                                    var inputField = item.ErrorField;
                                    $("input[name=" + inputField + "]").attr('failure', '');
                                });
                            }
                        }
                    }).always(function () {
                        loadbtn.stop(function () { });
                    });

                    return false;
                });
            });
        </script>
    }
}


